<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSX语法</title>
    <!-- 1. 引入react核心库 -->
    <script src="../../../../node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../../../../node_modules/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <!-- <input type="text" placeholder="请输入内容-真实dom"> -->
    <script type="text/babel">
      // 3. 创建React元素/创建虚拟dom-使用JSX语法
      /*
      * jsx语法规则
      * 1.定义虚拟DOM时,不要写引号。
      * 2.标签中混入JS表达式时要用{}
      * 3. 样式的类名指定不要用class,要用className
      * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
      *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
      *   4.2 推荐用<></>
      * 5. 内联样式,要用style={{key:value}}的形式去写。
      * 6. 标签必须闭合
      * 7. 标签首字母
      *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
          7.2   (2),若大写字母开头, react就去演染对应的组件,若组件没有定义,则报错。
      *  语句和表达式
      * 8. 注释 需要在{} 中写
      * 9. false, null, undefined, and true 是合法的子元素，并不会被渲染，直接忽略。
      */
      
      let count = 100
      let a = 20
      let msg = '你好React'
      let arr = [1,2,3]
      let obj = {
        name: 'zhangsan',
        age: 18
      }
      let isShow = true // null undefined 
      let other = null 
      let other1 = undefined 
      let p1 = <p>这是一个用jsx语法写的段落<span style={{color:'red'}}>红色</span></p>
      let item = <>
         <div className='item'>
          <h2 className='title'>中奖列表</h2>
          <p>总数：{count}</p>
         <input type="text" placeholder="请输入内容" />
         <hr />
         <br />
         {
         // 不被浏览器识别的标签首字母小写-报错
         // <myTable>MyTable</myTable>
         }
        {/* 
        // 不被浏览器识别首字母大写-报错
        <MyTable>MyTable</MyTable>
        */ }
       </div>
       <h2>表达式</h2>
       <ul>
         <li>a: {a}</li>
         <li>a+count: {a+count}</li>
         <li>msg: {msg}</li>
         <li>arr-map: {arr.map(item => item+2)}</li>
         <li>obj：{obj.name}-{obj.age}</li>
         <li>jsx本身是一个表达式: {p1}</li>
         <li>isShow: {isShow ? '显示': '隐藏'}</li>
         <li>null: {other}</li>
         <li>undefined: {other1}</li>
       </ul>
       <h2>语句</h2>
       <p>
         
         {
            "(1).if(){}"
         }
         <br />
         {
            "(2).for"
         }
         <br />
         
         {
            "(3).switch(){case 1:xxxx}"
         }
         
       </p>
       </>
       // 4. 创建根节点
       let root = ReactDOM.createRoot(document.getElementById('root'))
       // 5. 把虚拟dom渲染到页面中
          root.render(item)
       console.log('vdom',item)
       console.log('tdom',document.getElementById('root'))
       
          
          
      

    </script>
</head>
<body>
    
</body>
</html>